<template>
  <el-dialog
    title="选择链接"
    :visible.sync="show"
    width="950px"
    :before-close="close"
  >
    <ul
      style="
    height: 500px; padding-right: 10px;"
      class="scrollbars"
    >
      <li
        :class="{ active: 0 == activeNum }"
        @click="
          () => {
            activeNum = 0;
            getJump();
          }
        "
      >
        选择功能链接
      </li>
      <li
        :class="{ active: 1 == activeNum }"
        @click="
          () => {
            activeNum = 1;
            classList();
          }
        "
      >
        商品分类链接
      </li>
      <li
        :class="{ active: 2 == activeNum }"
        @click="
          () => {
            activeNum = 2;
            shopList();
          }
        "
      >
        选择商品链接
      </li>
      <li
        :class="{ active: 3 == activeNum }"
        @click="
          () => {
            activeNum = 3;
            getMarketList();
          }
        "
      >
        选择活动链接
      </li>
      <!--
      <li @click="()=>{activeNum=3;childList()}"
          :class="{active: 3==activeNum}">选择子页面链接</li> -->
    </ul>
    <div class="msg-box scrollbars">
      <div v-if="activeNum == 0" class="child-box">
        <div
          v-for="(item, index) in functionList"
          :key="index"
          class="child-item"
          style="text-align:center"
          @click="chooseHandle(item)"
        >
          <img :src="Url + item.jump_src" style="width: 40px;" class="img" />
          <div class="descipe">
            {{ item.jump_name }}
          </div>
        </div>
      </div>
      <div v-if="activeNum == 1" class="child-box">
        <div
          v-for="(item, index) in theModel"
          :key="index"
          class="child-item"
          @click="chooseHandle(item)"
        >
          <img :src="Url + item.jump_src" class="img" />
          <div class="descipe">
            {{ item.jump_name }}
          </div>
        </div>
      </div>
      <div v-if="activeNum == 2" class="child-box">
        <div class="box-top">
          <div
            v-for="(item, index) in shopModel"
            :key="index"
            class="child-item"
            @click="chooseHandle(item)"
          >
            <img
              :src="Url + item.jump_src + $store.state.imgRotate"
              class="img"
            />
            <div class="descipe">
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.jump_name"
                placement="bottom"
              >
                <span>{{ item.jump_name }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="box-bottom">
          <el-pagination
            :page-size="18"
            layout="pager,jumper"
            :total="shopModelTotals"
            @current-change="shopModelChanges"
          >
          </el-pagination>
        </div>
      </div>
      <div v-if="activeNum == 3">
        <div v-if="aShow" class="child-box">
          <div
            v-for="(item, index) in marketList"
            :key="index"
            class="child-item"
            style="text-align:center"
            @click="tabTag(item)"
          >
            <img :src="Url + item.img" style="width: 40px;" class="img" />
            <div class="descipe">
              {{ item.title }}
            </div>
          </div>
        </div>
        <div v-else class="child-box">
          <div class="box-top">
            <div style="width:100%;padding:6px;">
              <el-table
                :data="listData"
                header-cell-class-name="table-header-cell"
                row-class-name="table-row-one"
              >
                <el-table-column
                  v-for="(item, index) in tableHeadData"
                  :key="index"
                  :label="item.label"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-if="index == 0">{{ scope.row.jump_name }}</span>
                    <span v-if="index == 1">
                      <span v-if="scope.row.jump_stime">{{
                        scope.row.jump_stime
                      }}</span>
                      <span v-if="scope.row.jump_etime">
                        至 {{ scope.row.jump_stime }}</span
                      >
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center" property="address">
                  <template slot-scope="scope">
                    <span v-if="scope.row.jump_title == '文章'">
                      {{ scope.row.jump_status == 0 ? "未发布" : "已发布" }}
                    </span>
                    <span v-if="scope.row.jump_title == '砸金蛋'">
                      <span v-if="scope.row.jump_status == 0">未开始</span>
                      <span v-if="scope.row.jump_status == 1">进行中</span>
                      <span v-if="scope.row.jump_status == 2">结束</span>
                      <span v-if="scope.row.jump_status == 3">停用</span>
                      <span v-if="scope.row.jump_status == 4">启用</span>
                    </span>
                    <span v-if="scope.row.jump_title == '超值拼团'">
                      <span v-if="scope.row.jump_status == 1">未开始</span>
                      <span v-if="scope.row.jump_status == 2">进行中</span>
                      <span v-if="scope.row.jump_status == 3"> 结束</span>
                    </span>
                    <span v-if="scope.row.jump_title == '视频社区'">
                      <span v-if="scope.row.jump_status == 1">已上架</span>
                      <span v-if="scope.row.jump_status == 2">已下架</span>
                    </span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="chooseHandle(scope.row)"
                    >
                      选择
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box-bottom">
            <el-pagination
              :page-size="18"
              layout="pager,jumper"
              :total="marketModelTotals"
              @current-change="marketModelChanges"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  GETLISTLink,
  GOODSLink,
  GETLISTLinkJump,
  MARKETLIST,
  MARKETJump
} from "@/service/public";
export default {
  name: "AlertLink",
  props: {
    dialogFormVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      activeNum: 0,
      theModel: [],
      shopModel: [],
      functionList: [],
      Url: this.$store.state.qiniu,
      shopModelPage: 1,
      shopModelTotals: 0,
      marketModelPage: 1,
      marketModelTotals: 0,
      aShow: true,
      marketList: [],
      listData: [],
      tableHeadData: [],
      marketChlid: ""
    };
  },
  computed: {
    show: {
      get() {
        return this.dialogFormVisible;
      },
      set() {}
    }
  },
  watch: {
    dialogFormVisible: {
      handler: function(v) {
        if (v) {
          this.getJump();
        }
      },
      deep: true
    }
  },
  methods: {
    chooseHandle(obj) {
      this.aShow = true;
      this.$emit("linked", obj);
    },
    close() {
      this.aShow = true;
      this.$emit("linked");
    },

    shopModelChanges(page) {
      this.shopModelPage = page;
      this.shopList();
    },

    async getJump() {
      this.functionList = [];
      let params = {
        pageshow: 30,
        fromtype: "shop",
        flie_type: 1
      };
      await GETLISTLinkJump(params).then(({ code, data }) => {
        if (code === 200) {
          data.forEach(item => {
            if (!item) {
              return;
            }
            this.functionList.push({
              jump_id: "",
              jump_name: item.jump_name,
              jump_src: item.icon,
              jump_status: item.status,
              jump_url: item.link_url,
              link_url: item.link_url,
              openType: "navigateTo",
              lex: "功能连接链接"
            });
            this.functionList.forEach(ele => {
              if (ele.jump_url === "/pages/index/index")
                ele.openType = "redirectTo";
              if (ele.jump_url === "/pages/mine/mine")
                ele.openType = "redirectTo";
            });
          });
        }
      });
    },
    async classList() {
      this.theModel = [];

      await GETLISTLink().then(({ code, data, msg }) => {
        if (code === 200) {
          data.forEach(ele => {
            ele.second.forEach(eles => {
              this.theModel.push({
                jump_id: eles.type_id,
                jump_name: eles.type_name,
                jump_src: eles.type_cover,
                jump_url: "/pages/ShopList/ShopList",
                openType: "navigateTo",
                lex: "商品分类链接"
              });
            });
          });
          this.theModel.unshift({
            jump_id: "",
            jump_name: "全部分类",
            jump_src: "jsynewshop全部商品.svg",
            jump_url: "/pages/ShopList/ShopList",
            openType: "navigateTo",
            lex: "商品分类链接"
          });
        } else {
          this.$message.error(msg);
        }
      });
    },

    async shopList() {
      this.shopModel = [];
      let prams = {
        page: this.shopModelPage,
        pageshow: 18
      };
      await GOODSLink(prams).then(({ code, data, msg }) => {
        if (code === 200) {
          this.shopModelTotals = data.count;
          data.list.forEach(ele => {
            this.shopModel.push({
              jump_id: ele.goods_id,
              jump_src: ele.goods_cover.split(",")[0],
              jump_name: ele.goods_name,
              jump_url: "/pages/shopDetails/shopDetails",
              openType: "navigateTo",
              lex: "商品链接"
            });
          });
        } else {
          this.$message.error(msg);
        }
      });
    },

    async getMarketList() {
      this.aShow = true;
      this.marketList = [];
      await MARKETLIST().then(({ code, data, msg }) => {
        if (code === 200) {
          data.forEach(ele => {
            ele.children.forEach(eles => {
              if (eles.type === 2) {
                this.marketList.push(eles);
              }
            });
          });
        } else {
          this.$message.error(msg);
        }
      });
    },
    async tabTag(e) {
      this.aShow = false;
      this.marketChlid = e;
      this.listData = [];
      let linkUrl = "";
      switch (e.title) {
        case "文章":
          this.tableHeadData = [{ label: "文章标题" }, { label: "更新时间" }];
          linkUrl = "/elsePage/pages/articleContent/articleContent";
          break;
        case "视频社区":
          this.tableHeadData = [{ label: "视频标题" }];
          linkUrl = "/elsePage/pages/playVideo/playVideo";
          break;
        case "砸金蛋":
          this.tableHeadData = [{ label: "活动名称" }, { label: "活动时间" }];
          linkUrl = "/elsePage/pages/smashEggs/smashEggs";
          break;
        case "超值拼团":
          this.tableHeadData = [{ label: "活动名称" }, { label: "活动时间" }];
          linkUrl = "/elsePage/pages/xianShiTeHui/xianShiTeHui";
          break;
        case "限时折扣":
          this.tableHeadData = [{ label: "活动名称" }, { label: "活动时间" }];
          linkUrl = "/elsePage/pages/xianShiTeHui/xianShiTeHui";
          break;
        // case '分销':
        //   this.tableHeadData = [
        //     { label: '活动名称' },
        //     { label: '活动时间' }
        //   ]
        //   linkUrl = '/elsePage/pages/xianShiTeHui/xianShiTeHui'
        //   break
      }
      await MARKETJump(e.link, {
        page: this.marketModelPage,
        pageshow: 10
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.marketModelTotals = data.count;
          data.list.forEach(ele => {
            this.listData.push({
              jump_id:
                ele.article_id ||
                ele.id ||
                ele.assemble_id ||
                ele.limit_id ||
                ele.card_id,
              jump_title: e.title,
              jump_name: ele.title || ele.activity_name || ele.name,
              jump_src: ele.cover || ele.pic,
              jump_stime: ele.create_at || ele.begin_time || ele.stime,
              jump_etime: ele.end_time || ele.etime,
              jump_status: ele.status,
              jump_url: linkUrl,
              openType: "navigateTo",
              lex: "活动链接"
            });
          });
        } else {
          this.$message.error(msg);
        }
      });
    },
    marketModelChanges(page) {
      this.marketModelPage = page;
      this.tabTag(this.marketChlid);
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  width: 140px;
  display: inline-block;
  vertical-align: top;
  li {
    text-align: center;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    font-size: 16px;
    color: #595961;
    margin: 52px 0;
    cursor: pointer;
    transition: all 500ms linear;
  }
  .active {
    border-right: 5px solid #409eff;
    color: #409eff;
  }
}
.msg-box {
  max-height: 500px;
  display: inline-block;
  border: 2px solid #e9e9e9;
  width: 713px;
  margin-left: 10px;
  height: 500px;
  align-content: flex-start;
  justify-content: flex-start;
}
.child-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .box-top {
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .box-bottom {
    width: 100%;
    height: 60px;
    text-align: center;
  }
  .child-item {
    cursor: pointer;
    width: 80px;
    height: 111px;
    background-color: #ffffff;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    margin-left: 25px;
    margin-top: 25px;
    overflow: hidden;
    .img {
      width: 100%;
      height: 80px;
    }
    .descipe {
      width: 100%;
      text-align: center;
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      margin-top: -6px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>
